<template>
	<!-- 提货中心订单详情 -->
	<view class="order_detail">
		<p class="p4">
			<image :src="dataList.leader.head_img" mode=""></image>
			<text class="text2">{{dataList.leader.username}}</text>
			<text class="status" :style="{color:newColor.color}">{{typeText[dataList.order.status]}}</text>
		</p>
		<view class="list_s" v-for="(item,index) in dataList.goods" :key="index">
			<image :src="item.img[0]" mode=""></image>
			<view class="goods_right">
				<p class="p1">{{item.title}}</p>
				<p class="p2"><text class="text1">规格:{{item.option_title || '暂无规格'}}</text></p>
				<p class="p2"><text class="text1">¥{{item.price}} x {{item.num}}</text></p>
				<p class="p3">
					<text class="text2">小计：</text>
					<text class="text1" :style="{color:newColor.color}">¥{{item.total_price}}</text>
				</p>
			</view>
		</view>
		<p class="youhui">
			<text class="text1">优惠券</text>
			<text class="text2">-¥{{dataList.order.coupon_money}}</text>
		</p>
		<p class="youhui">
			<text class="text1">实付款</text>
			<text class="text2" :style="{color:newColor.color}">¥{{dataList.order.total_price}}</text>
		</p>
		<p class="youhui">
			<text class="text1">订单编号</text>
			<text class="text2">{{dataList.order.order_no}}</text>
		</p>
		<p class="youhui">
			<text class="text1">收货人地址</text>
			<text class="text2">{{dataList.order.address}}</text>
		</p>
		
		<p class="youhui">
			<text class="text1">收货人电话</text>
			<text class="text2">{{dataList.order.phone}}</text>
		</p>
		<p class="youhui">
			<text class="text1">收货人</text>
			<text class="text2">{{dataList.order.recipients}}</text>
		</p>
		<view class="bottom_price" @click="ok" v-if="dataList.order.status == 3">
			<text class="allprice" :style="{color:newColor.color,borderColor:newColor.color}">收货成功</text>
		</view>
		
		<view class="bottom_price" @click="remindDeliver" v-if="dataList.order.status == 2">
			<text class="allprice" :style="{color:newColor.color,borderColor:newColor.color}">确认到货</text>
		</view>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
	export default {
		data(){
			return{
				status: 0,
				active: true,
				typeText: ['待支付','备货中','待提货','配送中','已完成'],
				type: 2,
				orderid:'',
				dataList:{}
			}
		},
		onShow() {
			this.orderid = this.$Route.query.orderid
			this.getOrderId()
			setTimeout(()=>{
				this.active = false
			},600)
		},
		methods:{
			getOrderId(){
				this.request('order/orderDetail',{
					order_id: this.orderid
				}).then(res=>{
					console.log(res,77)
					this.dataList = res.data
				})
			},
			ok(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否收货成功?',
					success: res => {
						if(res.confirm){
							uni.showLoading({
								title:'提交中...'
							})
							that.request('order/finishOrder', {
								order_id: that.dataList.order.id,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 200) {
									uni.showToast({
										title: '收货成功!'
									});
									that.getOrderId()
								}
								if (res.code == 400) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			remindDeliver() { //提货点确认到货
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认到货?',
					success: res => {
						if(res.confirm){
							uni.showLoading({
								title:'提交中...'
							})
							that.request('order/goodsPointReReceiveOrder', {
								order_id: that.dataList.order.id,
							}).then(res => {
								uni.hideLoading()
								if (res.code == 200) {
									uni.showToast({
										title: '确认到货成功!'
									});
									that.getOrderId()
								}
								if (res.code == 400) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.order_detail {
	overflow: hidden;
	margin-bottom: 150upx;
	// background-color: #F2F2F2;
}
.pop_box {
	width: 600rpx;
	min-height: 340upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
	margin: 0 auto;
	border-bottom: 1upx solid #f2f2f2;
	.view1 {
		overflow: hidden;
		position: relative;
		.p2 {
			width: 40%;
			margin-top: 20upx;
			float: left;
			image {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				float: left;
				margin-top: 3upx;
			}
			text {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 20upx;
			}
		}
		.p3 {
			width: 60%;
			margin-top: 1upx;
			float: right;
			.text1 {
				font-size: 24upx;
				color: #333;
				display: block;
			}
			.text2 {
				float: left;
				font-size: 22upx;
				color: #999999;
				line-height: 60upx;
			}
		}
		.goto {
			width: 100upx;
			height: 46upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 23upx;
			font-size: 22upx;
			color: #ffffff;
			text-align: center;
			line-height: 46upx;
			position: absolute;
			right: 0;
			bottom: 20upx;
		}
	}
	.p4 {
		text-align: center;
		font-size: 28upx;
	}
	.p5 {
		overflow: hidden;
		> text {
			float: left;
			margin: 0 auto;
			color: #999;
			font-size: 22upx;
			line-height: 60upx;
			margin-left: 30%;
		}
	}
	.people {
		overflow: hidden;
		display: flex;
		width: 600upx;
		justify-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10upx;
		p {
			flex: 1;
			overflow: hidden;
			max-width: 20%;
			min-width: 20%;
			text-align: center;
			margin-bottom: 10upx;
			image {
				width: 50upx;
				height: 50upx;
				border: 2upx dashed rgba(242, 58, 58, 1);
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
			text {
				font-size: 24upx;
			}
		}
	}
}
.p4 {
		padding-top: 30upx;
		width: 100vw;
		overflow: hidden;
		line-height: 50upx;
		.text1 {
			float: left;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		image {
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			float: left;
			margin-left: 35upx;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			float: left;
		}
		.status{
			float: right;
			font-size:30upx;
			font-family:Droid Sans Fallback;
			font-weight:bold;
			color:rgba(242,58,58,1);
			margin-right: 30upx;
		}
	}
.list_s {
	box-sizing: border-box;
	background-color: #ffffff;
	overflow: hidden;
	height: 256rpx;
	margin: 0 20upx;
	margin-top: 40upx;
	margin-bottom: 20upx;
	box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
	padding: 30upx;
	border-radius: 10upx;

	image {
		width: 250upx;
		height: 200upx;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
	}
	.goods_right {
		position: relative;
		overflow: hidden;
	}
	.p1 {
		font-size: 32upx;
		color: #000000;
		overflow: hidden;
		height: 90upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 10upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
	.p3 {
		margin-top: 20upx;
		.text1 {
			font-size: 36upx;
			color: #f23a3a;
			margin-right: 20upx;
		}
		.text2 {
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(100, 100, 100, 1);
		}
	}
	.goumai {
		font-size: 24upx;
		width: 150upx;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		background: rgba(242, 58, 58, 1);
		border-radius: 28upx;
		color: #ffffff;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
	}
}
.youhui {
	height: 40upx;
	line-height: 40upx;
	padding: 20upx 30upx;
	border-bottom: 1upx solid #f2f2f2;
	box-sizing: content-box;
	.text1 {
		font-size: 24upx;
		color: #333333;
	}
	.text2 {
		float: right;
		color: #999999;
		font-size: 24upx;
		margin-right: 5upx;
		margin-top: 2upx;
	}
	image {
		float: right;
		width: 12upx;
		height: 22upx;
		margin-top: 12upx;
	}
}
.bottom_price {
	height: 98upx;
	line-height: 98upx;
	background: rgba(255, 255, 255, 1);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	.allprice {
		width: 500upx;
		height: 60upx;
		background: #FFFFFF;
		border: 2upx solid #F23A3A;
		border-radius: 38upx;
		font-size: 28upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: #F23A3A;
		text-align: center;
		line-height: 60upx;
		display: flex;
		justify-content: center;
		margin: auto;
	}
	.submit {
		display: flex;
		justify-content: center;
		margin: auto;
		width: 500rpx;
		height: 60upx;
		line-height: 60upx;
		border: 2upx solid rgba(242, 58, 58, 1);
		border-radius: 38upx;
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(242, 58, 58, 1);
		text-align: center;

	}
}
</style>
